<template>
	<view class="content">
		<scroll-view scrollY class="content-scroll" @scrolltolower="reachBottom">
			<view class="content-sum">
				<view class="content-sum-nav">
					<view class="content-sum-nav-play">
						<u-icon name="play-circle-fill" size="45rpx" color="#ff6448"></u-icon>
						<text>播放全部</text>
					</view>
					<view class="content-sum-nav-buttom">

						<u-icon name="checkmark-circle" size="45rpx"></u-icon>
					</view>
				</view>
				<view class="content-sum-info" v-for="(item, index) in searchmsg" :key="index"
					@tap="playMusic(item.id,index)">
					<view class="content-sum-info-list" @tap="gotoPlay">
						<text>{{item.name}}</text>
						<view class="content-sum-info-list-user">
							<text>{{item.ar[0].name}}</text>
							<text>-{{item.al.name}}</text>
						</view>

						<!-- <text>{{item.ar[0].name}}-{{item.al.name}}</text> -->
					</view>

					<view class="content-sum-info-icon">
						<image src="@/static/songs/mvs.png" v-if="item.mv !== 0 "></image>
						<image src="@/static/songs/more.png" mode=""></image>
					</view>

				</view>
			</view>
			<u-loadmore status="loading" />
		</scroll-view>
	</view>
</template>

<script>
	import {
		getmylist
	} from '@/http/search.js'
	export default {
		props: ['searchmsg'],
		methods: {
			reachBottom() {
				this.$parent.$parent.$parent.$parent._getmylist()
			},
			
			// 点击播放
			playMusic(id, index) {
				this.$store.dispatch("playIndex", index);
				this.$store.dispatch("playMusic", {
					list: this.searchmsg,
					index: index,
					listid: id
				})
			},
			//跳转到播放界面
			gotoPlay() {
				uni.navigateTo({
					url: '/pages/Playmusic/Playmusic?id=' + this.list_id
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		height: 100%;
		background-color: #f6f6f6;
		// margin: 0 15px;

		&-scroll {
			height: calc(100vh - 84px);
		}

		&-sum {
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			padding: 10rpx 30rpx;
			box-sizing: border-box;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;


			&-info {
				border-bottom: 1px solid #EBEBEB;
				display: flex;
				justify-content: space-between;
				padding: 20rpx 0;
				align-items: center;
				font-size: 30rpx;
				font-family: STXihei;

				&-list {
					display: flex;
					flex-direction: column;
					flex: 9;

					&-user {
						font-size: 18rpx;
						color: #3f3f3f;
					}

				}

				&-icon {
					display: flex;
					flex: 1;

					image {
						width: 25px;
						margin: 0 10rpx;
						height: 25px;
					}
				}
			}

			&-nav {
				border-bottom: 1px solid #EBEBEB;
				padding: 10px 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				&-play {
					display: flex;
					align-items: center;

					text {
						margin-left: 15rpx;
						font-size: 30rpx;
						font-weight: bold
					}
				}

				&-buttom {
					width: 40px;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>
